<template>
  <div
    class="card-item"
    :style="{
      marginLeft: isFold ? '-30px' : '-20px',
      backgroundColor: round > info.r ? '#ddd' : 'white',
      marginBottom: isSel ? '15px' : '0',
    }"
    v-show="isShow"
  >
    <div class="top-code">
      <div class="code-num" :style="{ color: transCardColor(info.c) }">{{ info.t }}</div>
    </div>
    <div class="mid-icon">
      <div class="code-icon" :style="{ color: transCardColor(info.c) }">{{ transCardIcon(info.c) }}</div>
    </div>
    <div class="btm-code">
      <div :style="{ color: transCardColor(info.c) }">●</div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
  info: { // 卡牌对象
    type: Object,
    required: true,
  },
  round: { // 当前回合
    type: Number,
    default: -1,
  },
  mode: { // 身份（his: 不显示当前回合牌）
    type: String,
    default: '',
  },
  isFold: { // 是否层叠
    type: Boolean,
    default: false,
  },
  curSel: { // 当前选择的牌
    type: Object,
    default: { t: '0', c: 'N', s: -1 },
  },
});

const isShow = computed(() => { // 看不到对手当前回合出牌情况
  if(props.mode === 'his' && props.info.r === props.round) return false;
  return true;
});
const isSel = computed(() => { // 选择效果
  if(props.curSel === null) return false;
  if(props.info.t === props.curSel.t && props.info.c === props.curSel.c) {
    return true;
  }
  return false;
});

// 区分牌
const transCardColor = (clr) => {
  switch(clr) {
    case 'R': return 'red';
    case 'G': return 'green';
    case 'B': return 'blue';
    case 'O': return 'orange';
    default: return 'grey'; 
  }
};
const transCardIcon = (clr) => {
  switch(clr) {
    case 'R': return '♥';
    case 'G': return '♣';
    case 'B': return '♠';
    case 'O': return '♦';
    default: return '●'; 
  }
};

</script>

<style lang="scss" scoped>
.card-item {
  width: 58px;
  max-height: 80px;
  height: 90%;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 0 3px #ddd;
  overflow: hidden;
  cursor: pointer;
}
.perspective { // 透视效果
  // 父元素：perspective: 1000px;
  transform-style: preserve-3d;
  transform: rotateX(20deg);
}
.top-code {
  width: 100%;
  height: 35%;
  .code-num {
    font-weight: bold;
    font-size: 15px;
    float: left;
    margin-left: 5px;
  }
}
.mid-icon {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 23px;
}
.btm-code {
  width: 100%;
  height: 30%;
  font-weight: bold;
  margin-left: 5px;
  font-size: 12px;
}
.code-icon {
  font-size: 14px;
}
</style>
